/**
- Copyright (c) 2019 Kagilum SAS.
-
- This file is part of iceScrum.
-
- iceScrum is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as published by
- the Free Software Foundation, either version 3 of the License.
-
- iceScrum is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- GNU General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with iceScrum.  If not, see <http://www.gnu.org/licenses/>.
-
- Authors:
-
- Vincent Barrier (vbarrier@kagilum.com)
- Nicolas Noullet (nnoullet@kagilum.com)
**/

@font-face {
  font-family: 'averta-regular';
  src: url('./fonts/averta-regular.woff2') format('woff2')
}

@font-face {
  font-family: 'averta-bold';
  src: url('./fonts/averta-bold.woff2') format('woff2')
}

html, body {
  font-family: $font-family-base;
}

strong, b, .strong {
  font-family: $is-font-family-bold;
  font-weight: normal;
}

////////////////////
// Button
////////////////////

.btn {
  font-size: $is-font-size-sm;
  font-family: $is-font-family-bold;
  line-height: 1.29;
  border: none;
  white-space: nowrap;
}

.btn-sm {
  font-family: $font-family-base;
  line-height: 1.6;
}

.btn, .btn-sm {
  &:focus, &:not(:disabled):not(.disabled):active:focus {
    box-shadow: none;
  }
}

.btn-link {
  font-family: $font-family-base;
}

.btn-primary {
  text-shadow: 0 0.125rem 0.25rem #054ca6;

  &:hover, &:active, &:focus, &:not(:disabled):not(.disabled):active:focus {
    background-color: $primary;
    box-shadow: 0 0.5rem 1.75rem 0 rgba(0, 103, 232, 0.44);
  }

  &:not(:disabled):not(.disabled):active {
    background-color: $primary;
  }

  &.btn-sm {
    font-family: $is-font-family-bold;
  }
}

.btn-primary.gold {
  border: none;
  background-color: #fbca00;
  text-shadow: 0 0.125rem 0.25rem #d2c518;

  &:hover, &:active, &:focus, &:not(:disabled):not(.disabled):active:focus {
    background-color: #fbca00;
    box-shadow: 0 0.5rem 1.75rem 0 rgba(251, 202, 0, 0.44);
  }

  &:not(:disabled):not(.disabled):active {
    background-color: #fbca00;
  }
}

.btn-secondary {
  color: $is-text-color-alt;
  box-shadow: 0 0.125rem 0.5625rem 0 $is-shadow-color-1;
  background-color: $is-bg-color;

  &:hover, &:active, &:focus, &:not(:disabled):not(.disabled):active:focus {
    background-color: $is-bg-color;
    box-shadow: 0 0.5rem 1.75rem 0 $is-shadow-color-1;
  }

  &.btn-sm {
    box-shadow: none;
    border: 1px solid $is-outline-color;
    padding: ($btn-padding-y-sm - 0.0625rem) ($btn-padding-x-sm - 0.0625rem); // Cancel out the border
    text-shadow: none;
    background: none;

    &:hover, &:active, &:focus, &:not(:disabled):not(.disabled):active:focus {
      box-shadow: 0 0.5rem 1.75rem 0 $is-shadow-color-1;
      background: none;
      border-color: $is-outline-color;
    }
  }
}

$btn-shadow: (success: rgba(36, 153, 88, 0.3), warning: rgba(179, 142, 1, 0.3), danger: rgba(255, 61, 51, 0.2));

@each $btn-color in (success warning danger) {
  .btn-#{$btn-color} {

    &:hover, &:active, &:focus, &:not(:disabled):not(.disabled):active:focus {
      background-color: theme-color($btn-color);
      box-shadow: 0 0.5rem 1.75rem 0 map-get($btn-shadow, $btn-color);
    }

    &:not(:disabled):not(.disabled):active {
      background-color: theme-color($btn-color);
    }

    &.btn-sm {
      color: theme-color($btn-color);
      border: 1px solid theme-color($btn-color);
      padding: ($btn-padding-y-sm - 0.0625rem) ($btn-padding-x-sm - 0.0625rem); // Cancel out the border
      background: none;

      &:hover, &:active, &:focus, &:not(:disabled):not(.disabled):active:focus {
        border-color: theme-color($btn-color);
        color: theme-color($btn-color);
        box-shadow: 0 0.5rem 1.75rem 0 map-get($btn-shadow, $btn-color);
        background: none;
      }
    }
  }
}

// Emulating bootstrap 3 toolbar (TODO check if good approach)
.btn-toolbar {
  align-items: center;
  margin-left: -0.625rem; // Offset the first child's margin
  > .btn,
  > .btn-group,
  > .btn-menu,
  > .input-group {
    margin-left: 0.625rem;
  }
}

.btn-toolbar-multiline {
  margin-bottom: -0.5rem;

  > .btn,
  > .btn-group,
  > .btn-menu,
  > .input-group {
    margin-bottom: 0.5rem;
  }
}

// New button types

.btn-icon {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0 !important;

  .icon {
    width: 100%;
    height: 100%;
    background-size: 1.25rem;
  }

  &.btn-sm:not(.btn-secondary) {
    width: 0.875rem;
    height: 0.875rem;

    .icon {
      background-size: 0.875rem;
    }
  }

  &.btn-secondary {
    width: 1.875rem;
    height: 1.875rem;

    .icon {
      background-size: 0.75rem 0.8125rem;
    }
  }
}

.btn-dropdown-icon {
  padding: 9px 9px !important;
  padding-bottom: 5px !important;
  line-height: 1.3rem !important;

  &:after {
    vertical-align: 0.33rem !important;
  }
}

.btn-colorpicker, .btn-colorpicker:hover {
  color: $is-black;

  &.invert {
    color: white;
  }
}

.markItUpContainer .btn {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

////////////////////
// Form
////////////////////

form label {
  font-size: $is-font-size-sm;
}

.nav-item {
  font-size: $is-font-size-sm;
}

.form-control:not(:disabled):focus, .form-control:not(:disabled):hover {
  box-shadow: 0 8px 28px 0 rgba(8, 12, 29, 0.15);
  background-color: $is-bg-color;
}

.form-text {
  font-size: 0.875rem;
}

.form-control {
  &:disabled,
  &[readonly] {
    border-color: transparent;
  }
}

input::placeholder {
  color: $input-placeholder-color;
  opacity: 1;
}

.input-group-text {
  height: $input-height;
}

////////////////////
// Modal
////////////////////

.modal-content {
  box-shadow: 0 2.625rem 3rem 0 rgba(8, 12, 29, 0.21);
}

.modal-title {
  @extend %is-title;
}

.modal-header {
  padding-left: 1.625rem;
  padding-right: 1.625rem;

  .close {
    padding: 0;
    margin: 0.3125rem 0 0 0;
    opacity: 1;
    @include square-background(1.25rem);
    @include background-image-retina('close');

    &:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):focus {
      opacity: 1;
    }
  }
}

////////////////////
// Toast
////////////////////

.toast-container {
  position: absolute;
  top: 0.9375rem;
  right: 0;
  z-index: 100000
}

.toast {
  padding: 0.9375rem;
  padding-bottom: 1.5rem;
  padding-top: 0;
  backdrop-filter: none;

  &:not(:last-child) {
    margin-bottom: 0;
  }

  &:not(:first-child) {
    margin-top: -0.5rem;
  }
}

.toast-header {
  position: relative;
  border-radius: 4px;
  box-shadow: 0 9px 9px 0 rgba(35, 41, 48, 0.2);

  .toast-close {
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
    @include square-background(0.625rem);
    @include background-image-retina('remove-dark');
  }
}

.toast-content {
  display: flex;
  align-items: center;
  line-height: 1.17;

  .toast-icon {
    flex: 0 0 auto;
    @include rectangle-background(2.3125rem, 2.125rem);
    margin-left: -0.375rem;
    margin-right: 0.375rem;
  }

  .toast-success {
    background-image: url("alert-success.svg");
  }

  .toast-error {
    background-image: url("alert-error.svg");
  }

  .toast-warning {
    background-image: url("alert-warning.svg");
  }
}

////////////////////
// Dropdown
////////////////////

.dropdown-menu {
  box-shadow: $is-shadow;

  .dropdown-item {
    &.active {
      font-family: $is-font-family-bold;
    }

    a {
      color: inherit;
    }
  }
}

//https://stackoverflow.com/questions/51010306/angularjs-ui-bootstrap-dropdown-button-with-bootstrap-4
.dropdown.open .dropdown-menu {
  display: block;
}

.dropdown-toggle:not(.no-caret) {
  &::after {
    display: inline-block;
    content: "";
    margin-left: 0.4em;
    vertical-align: 0.2em;
    width: 6px;
    height: 6px;
    transform: rotate(45deg);
    border-right: 2px solid;
    border-bottom: 2px solid;
  }

  &.caret-reverse::after {
    transform: rotate(225deg);
    margin-top: 0.825rem;
  }

  &:empty::after {
    margin-left: 0;
  }
}

.dropdown-header {
  font-family: $is-font-family-bold;
}

.dropdown-menu.dropdown-menu-scroll {
  max-height: 440px;
  overflow-x: auto;
}

////////////////////
// Nav
////////////////////

.nav-link.active, .navbar-nav .active .nav-link {
  font-family: $is-font-family-bold;
}

.nav-fill .nav-item {
  text-align: left;
}

.nav-link.disabled {
  pointer-events: none;
}

.navbar-toggler {
  border: none !important;
}

////////////////////
// Tooltip
////////////////////

.tooltip-inner {
  box-shadow: $is-shadow;
}

.tooltip {
  font-family: "FontAwesome", $font-family-base; // For arrows

  // It seems that with the new bootstrap the arrow position is computed by JS and applied on the element directly, we do it here the old way with CSS
  &.top .arrow {
    bottom: 0;
    left: 50%;
    margin-left: -$tooltip-arrow-width/2;
  }

  &.right .arrow {
    top: 50%;
    left: 0;
    margin-top: -$tooltip-arrow-width/2;
  }

  &.left .arrow {
    top: 50%;
    right: 0;
    margin-top: -$tooltip-arrow-width/2;
  }

  &.bottom .arrow {
    top: 0;
    left: 50%;
    margin-left: -$tooltip-arrow-width/2;
  }
}

////////////////////
// Table
////////////////////

.table {
  font-size: $is-font-size-sm;

  &:not(.table-bordered) {
    thead th, th {
      border: none;
    }
  }
}

////////////////////
// Datepicker
////////////////////

.uib-datepicker-popup {
  padding: 8px 4px;

  .btn {
    border: none;

    .text-info {
      color: $is-primary-color !important;
    }

    &.btn-info {
      background-color: $is-primary-color !important;

      .text-info {
        color: white !important;
      }
    }
  }
}

////////////////////
// Other
////////////////////

.slider-track {
  background: $is-bg-color;
}

:focus {
  outline: none; // Remove browser native outline which is ugly
}

.alert, .window-alert, .announcement {
  color: $is-black;

  a {
    color: $is-black;
  }

  &.bg-primary, &.bg-info, &.bg-danger {
    color: white;

    a {
      color: white;
    }
  }
}
